<template>
  <view class="pages">
    <view class="form-wrap w100">
      <u--form labelPosition="left" :model="form" ref="uForm" labelWidth="180" :labelStyle="labelStyle">
        <u-form-item label="快递方式：" required>
          <u-radio-group v-model="form.kuaidi_type">
            <u-radio v-for="(item, index) in kuaidiTypes" :key="index" :label="item.name" :name="item.id"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="手机型号：" prop="product" required @click="showProduct = true">
          <u--input v-model="product" readonly border="surround" suffixIcon="arrow-right"
            placeholder="请选择手机型号"></u--input>
        </u-form-item>
        <u-form-item label="颜色：" prop="color" required @click="openColor">
          <u--input v-model="color" readonly border="surround" suffixIcon="arrow-right" placeholder="请选择颜色"></u--input>
        </u-form-item>
        <u-form-item label="内存：" prop="ram" required @click="openRam">
          <u--input v-model="ram" readonly border="surround" suffixIcon="arrow-right" placeholder="请选择内存"></u--input>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 1" label="序列号：" prop="imei">
          <u--input v-model="form.imei" border="surround" placeholder="请输入序列号"></u--input>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 2" label="快递单号：" prop="kuaidinum" required>
          <u--input v-model="form.kuaidinum" border="surround" placeholder="请输入快递单号"></u--input>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 2" label="负责人微信：" prop="headwechat" required>
          <u--input v-model="form.headwechat" border="surround" placeholder="请输入负责人微信"></u--input>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 2" label="客户手机号：" prop="kuaidimobile" required>
          <u--input v-model="form.kuaidimobile" border="surround" placeholder="请输入客户手机号"></u--input>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 1" label="详情照片：" prop="packimg">
          <u-upload :fileList="packimgList" @afterRead="packimgAfterRead" @delete="packimgDelete" name="1" width="120"
            height="120" :maxCount="10" :previewFullImage="true"></u-upload>
        </u-form-item>
        <u-form-item v-if="form.kuaidi_type == 1" label="序列号照片：" prop="imeiimg">
          <u-upload :fileList="imeiimgList" @afterRead="imeiimgAfterRead" @delete="imeiimgDelete" name="1" width="120"
            height="120" :maxCount="10" :previewFullImage="true"></u-upload>
        </u-form-item>
        <u-form-item label="备注信息：" prop="other">
          <u--textarea v-model="form.other" placeholder="请输入内容"></u--textarea>
        </u-form-item>
      </u--form>
      <view class="agreement">
        <u-checkbox-group v-model="agreementValue" placement="column">
          <u-checkbox size="30">
          </u-checkbox>
        </u-checkbox-group>
        <view class="text">同意<text @click="$to('/pages/login/agreementText')">《回收平台服务协议》</text></view>
      </view>
      <view class="confirm">
        <u-button type="primary" @click="confirm">提交</u-button>
      </view>
    </view>
    <!-- 手机型号选择 -->
    <u-picker :show="showProduct" :columns="selectProduct" itemHeight="88" @confirm="confirmProduct"
      @cancel="showProduct = false"></u-picker>
    <!-- 手机颜色选择 -->
    <u-picker :show="showColor" :columns="selectColor" keyName="name" itemHeight="88" @confirm="confirmColor"
      @cancel="showColor = false"></u-picker>
    <!-- 手机内存选择 -->
    <u-picker :show="showRam" :columns="selectRam" keyName="memory" itemHeight="88" @confirm="confirmRam"
      @cancel="showRam = false"></u-picker>
    <!-- 登录提示弹窗 -->
    <u-modal :show="showLogin" :showCancelButton="false" @confirm="confirmLogin">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">请先登录！</text>
        </view>
      </view>
    </u-modal>
    <!-- 认证提示弹窗 -->
    <u-modal :show="showAttestation" :showCancelButton="false" @confirm="confirmAttestation">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">请先完成实名认证！</text>
        </view>
      </view>
    </u-modal>
    <!-- 提交的认证弹窗 -->
    <u-modal :show="showStatus" :showCancelButton="true" @confirm="confirmStatus" @cancel="cancelStatus">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">请先完成实名认证后在提交订单？</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        showProduct: false,
        showColor: false,
        showRam: false,
        showLogin: false,
        showAttestation: false,
        showStatus: false,
        labelStyle: {
          fontSize: "28rpx",
          color: "#666",
        },
        // 产品选择
        selectProduct: [],
        // 颜色选择
        selectColor: [],
        // 内存选择
        selectRam: [],
        packimgList: [],
        imeiimgList: [],
        product: null,
        color: null,
        ram: null,
        form: {
          kuaidi_type: 2,
          product_id: null,
          imei: null,
          kuaidinum: null,
          headwechat: null,
          kuaidimobile: null,
          packimg: null,
          imeiimg: null,
          other: null
        },
        kuaidiTypes: [{
          name: '转寄',
          id: 2
        }, {
          name: '直寄',
          id: 1
        }],
        agreementValue: [],
      }
    },
    onShow() {
      const token = uni.getStorageSync('token')
      let islogin = token && token != '' ? true : false
      if (!islogin) return this.showLogin = true
      this.getProduct()
      this.getUserInfo()
    },
    methods: {
      // 获取型号数据
      async getProduct() {
        const res = await this.$http('/product/modelSelect')
        this.selectProduct = [res.list]
      },
      // 获取用户信息
      async getUserInfo() {
        await this.$http('/user/userinfo').then(res => {
          if (!res.realstatus || res.realstatus != 2) return this.showAttestation = true
        })
      },
      // 获取颜色数据
      async getColor() {
        const res = await this.$http('/product/colourSelect', {
          name: this.product
        })
        this.selectColor = [res.list]
      },
      // 获取内存数据
      async getRam() {
        const res = await this.$http('/product/memorySelect', {
          name: this.product,
          colour: this.color
        })
        this.selectRam = [res.list]
      },
      // 打开颜色
      openColor() {
        if (!this.product) return this.$f.toast('请先选择手机型号')
        this.showColor = true
        this.getColor()
      },
      // 打开内存
      openRam() {
        if (!this.product) return this.$f.toast('请先选择手机型号')
        if (!this.color) return this.$f.toast('请先选择颜色')
        this.showRam = true
        this.getRam()
      },
      confirmProduct(e) {
        this.product = e.value[0]
        this.showProduct = false
      },
      confirmColor(e) {
        this.color = e.value[0]
        this.showColor = false
      },
      confirmRam(e) {
        this.form.product_id = e.value[0].id
        this.ram = e.value[0].memory
        this.showRam = false
      },
      // 选择详情照片
      packimgAfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.packimgList.length
        lists.map((item) => {
          this.packimgList.push({
            ...item
          })
        })
      },
      // 删除详情照片
      packimgDelete(event) {
        this.packimgList.splice(event.index, 1)
      },
      // 选择序列号照片
      imeiimgAfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.imeiimgList.length
        lists.map((item) => {
          this.imeiimgList.push({
            ...item
          })
        })
      },
      // 删除序列号照片
      imeiimgDelete(event) {
        this.imeiimgList.splice(event.index, 1)
      },
      async confirm() {
        // console.log("uni.getStorageSync('realStatus')", this.form)
        if (uni.getStorageSync('realStatus') != 2) return this.showStatus = true
        if (['', null].includes(this.form.product_id)) return this.$f.toast('请选择手机型号')
        if (this.form.kuaidi_type == 1) {
          // if (['', null].includes(this.form.imei)) return this.$f.toast('请输入序列号')
          // if (this.packimgList.length == 0) return this.$f.toast('请上传详情照片')
          // if (this.imeiimgList.length == 0) return this.$f.toast('请上传序列号照片')
        } else if (this.form.kuaidi_type == 2) {
          if (['', null].includes(this.form.kuaidinum)) return this.$f.toast('请输入快递单号')
          if (['', null].includes(this.form.headwechat)) return this.$f.toast('请输入负责人微信')
          if (['', null].includes(this.form.kuaidimobile)) return this.$f.toast('请输入客户手机号')
        }
        if (this.agreementValue.length == 0) return this.$f.toast('请先查看并同意《回收平台服务协议》')
        this.$f.tipLoading('图片上传中')
        let num = 0
        const length = this.packimgList.length + this.imeiimgList.length
        let arr = []
        let arr2 = []
        for (let i = 0; i < this.packimgList.length; i++) {
          const result = await this.uploadFilePromise(this.packimgList[i].url)
          arr.push(result.fullurl)
          num++
        }
        this.form.packimg = arr.join()
        for (let i = 0; i < this.imeiimgList.length; i++) {
          const result = await this.uploadFilePromise(this.imeiimgList[i].url)
          arr2.push(result.fullurl)
          num++
        }
        this.form.imeiimg = arr2.join()
        if (num == length) {
          uni.hideLoading()
          this.submit()
        }
      },
      // 去登录
      confirmLogin() {
        this.showLogin = false
        this.$to('/pages/home/my', {}, 'tab')
      },
      // 去认证
      confirmAttestation() {
        this.showAttestation = false
        this.$to('/pages/my/authentication/realname')
      },
      // 认证结果弹窗-确认
      confirmStatus() {
        this.showStatus = false
        this.$to('/pages/my/authentication/realname')
      },
      // 认证结果弹窗-取消
      cancelStatus() {
        this.showStatus = false
      },
      // 重置数据
      reset() {
        this.form = {
          kuaidi_type: 1,
          product_id: null,
          imei: null,
          kuaidinum: null,
          headwechat: null,
          packimg: null,
          imeiimg: null,
          other: null
        }
        this.product = null
        this.color = null
        this.ram = null
      },
      submit() {
        this.$http('/order/create', this.form).then(res => {
          this.$to('/pages/home/index', {}, 'tab')
          this.reset()
          setTimeout(() => {
            this.$f.successToast('提交成功')
          }, 200)
        })
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://hsxt.ruyihui.net/api/common/upload',
            filePath: url,
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '0fe60a01-8332-409e-8d01-fdf0d4f9b1bd',
            },
            name: 'file',
            timeout: 10000,
            success: (res) => {
              setTimeout(() => {
                resolve(JSON.parse(res.data).data)
              }, 1000)
            },
            fail: res => {
              console.log('error')
              this.$f.errorToast('上传失败')
              reject(res)
            }
          });
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx;
  }

  .form-wrap {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 34rpx;
    box-sizing: border-box;
    // height: calc(100vh - 32rpx);
    position: relative;
  }

  .agreement {
    display: flex;
    align-items: center;
    padding-top: 20rpx;

    ::v-deep .u-radio-group {
      flex: inherit;
    }

    .text {
      font-size: 26rpx;

      text {
        color: #1890ff;
      }
    }
  }

  .confirm {
    // position: absolute;
    // bottom: 34rpx;
    // left: 34rpx;
    // right: 34rpx;
    padding-top: 30rpx;

    ::v-deep .u-button {
      border-radius: 80rpx !important;
    }
  }

  ::v-deep .u-input {
    padding: 8px 9px !important;
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-textarea {
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-border {
    border-color: #f4f8ff !important;
  }

  ::v-deep input,
  ::v-deep textarea {
    font-size: 28rpx !important;
  }

  .confirm {
    ::v-deep .u-button {
      font-size: 28rpx !important;
    }
  }
</style>
